<template>
    <div>
        <Home></Home>
        <button @click="addName">+name</button>
    </div>
</template>
<script>
import Home from './Home.vue';
import { computed } from 'vue';
export default {
    components: {
        Home
    },
    data() {
       return {
           names: ["1", "2", "3"]
       }
    },
    // 1. 
    // provide: {
    //     name: "yzh",
    //     age: 18
    // }
    
    //2.
    provide() {   //为了使用this 所以改为方法 
        return { 
            name: "yzh",
            age: 18,
            // length: this.names.length    
            length: computed(() => this.names.length)   //为了 数据变成响应式的 使用computed, 但他返回的是一个ref对象 数据在 .value里
        }
    },
    methods: {
        addName() {
            this.names.push("yzh");
            console.log(this.names);
        }
    },
}
</script>
<style>
</style>
